<template>
    <div class="Header">
           <div class="header-left">
                <span class="iconfont">
                     &#xe624;
                </span>
           </div>
           <div class="header-search">
                <span class="iconfont">
                    &#xe632;
                </span>
                输入城市/景点/游玩主题
           </div>
           <div class="header-right">
                <router-link to="/city" >{{cityname}}
                     <span class="iconfont">
                          &#xe600;
                    </span>
                </router-link>
                
           </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    computed:{
        ...mapState({
            'cityname':'city'
        })
    }
}
</script>

<style scoped > 
    .Header{
        position:sticky;
        z-index: 999;
        top: 0px;
       width: 100%;
       text-align: center;
       line-height: 44px;
       background-color: #00bcd4;
       color: #fff;
       font-size: 16px;
       display: flex;
       align-items: center;
       box-sizing: border-box;
    }
    .header-left{
       width: 10%; 
    }
    .header-search{
        flex: 1;
        background-color: #fff;
        height: 30px;
        border-radius: 2px;
        color: #e4e7ea;
        line-height: 30px;
        font-size: 14px;
        text-align: left;
        text-indent: 1em;
    }
    .Header .header-right{
        margin-left: 4px;
    }
    .header-right a{
        color: #fff;
        text-decoration: none;
    }
</style>